<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    //1.首先初始化包环境(yarn init -y)
     2.按照依赖包(yarn add webpack webpack-cli
    -D)因为是在项目开发阶段使用，项目上线之后不使用所以-D
    注：如果在工作区终端无法使用则window加x打开powershell管理员，然后输入set-ExecutionPolicy
    RemoteSigned，再初始化然后安装依赖包
    3.配置scripts(自定义命令)，在package.json文件内添加自定义属性名，属性为webpack
    4.yarn build,运行打包命令
    5.配置webpock来打包，创建webpack.config.js文件，导入path模块，使用module.exports
    对象，将模块内的成员共享出去，供外界使用，同时我们将入口，出口路径以及出口文件名写入
    操作：当我们让webpack打包后生成html文件并自动引入打包后的js
     1.下载插件yarn
    add html-webpack-plugin  -D 
    2.在webpack.config.js中配置，引入自动生成 html
    的插件，并里面设置根据模板生成对应的html，此时重新打包后dist文件夹下会多出html并运行看结果
    操作2：处理css文件
    1.准备css文件导入到webpack入口也就是main.js文件中，使两者建立联系
    2.安装依赖包yarn add style-loader css-loader
    -D，然后查webpack文档将配置写入到webpack.config.js，中此时运行打包命令在dist文件夹下之前设置出口文件中会出现css解析后的命令
    操作3：处理less文件
    1.准备less文件导入到webpack入口也就是main.js文件中，使两者建立联系
    2.安装依赖包yarn add less less-loader
    -D，然后查webpack文档将配置写入到webpack.config.js，中此时运行打包命令在dist文件夹下之前设置出口文件中会出现less解析后的命令
    操作4：处理图片
    1.准备包含图片的文件夹，将其导入到webpack入口也就是main.js文件中，使两者建立联系
    2.因为webpack5版本内有模块，所以不用下载依赖包，然后查文档将配置写入到webpack.config.js，type:
    'asset/resource',一个是解析文件的url，如果大于8kb则导处图片，反之则导处base64字符串，另一个是将目标文件输出到打包目录
    3.再次查找目录，在指南下资源模块内找到自定义输出文件名将配置导入， filename:
    'fonst1/[name].[hash:6][ext]'
    //创建一个在输出目录下名字为fonst1的文件名，文件名字生成一个hash6位数唯一标识,ext生成后缀名
    运行打包命令后即可在输出目录下生成图片的文件夹
  </body>
</html>
